<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <title>无效客户资源</title>
    <style>
        button a{color:#fff!important;}
        .formItem,.formItem .el-form-item__content{width:100%}
    </style>
</head>
<body>

<div id="mainDiv" class="mainPadding" style="display: none;">
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>电销管理</el-breadcrumb-item>
        <el-breadcrumb-item>无效客户资源</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row type="flex" class="row-bg marginB20" justify="start">
        <el-button type="primary" @click="openRelease">释放记录</el-button>
        <el-button type="success" @click="openBack">资源还原</el-button>
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline mainSearchForm" ref="queryForm" >
                <el-form-item label="客户状态:">
                    <el-select v-model="queryForm.customerStatus" placeholder="客户状态" clearable>
                        <el-option v-for="item in cusStatusArr" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电销组:">
                    <el-select v-model="queryForm.teleGorupId" placeholder="电销组" clearable>
                        <el-option v-for="item in teleketGroupArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电销顾问:">
                    <el-select v-model="queryForm.teleSaleIds" placeholder="电销顾问" clearable  filterable multiple>
                        <el-option v-for="item in teleketSaleArr" :key="item.id" :label="item.name" :value="item.id">
                            <el-checkbox-group v-model="queryForm.teleSaleIds">
                                <el-checkbox  :key="item.id" :label="item.id"> {{ item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="queryForm.createTime1" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker v-model="queryForm.createTime2" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-row v-show="isShow">
                    <el-form-item label="项目名称:">
                        <el-input  v-model="queryForm.project" placeholder="项目名称"></el-input>
                    </el-form-item>
                    <el-form-item label="是否重单:">
                        <el-select v-model="queryForm.isRepetition" placeholder="是否重单" width="100" clearable>
                            <el-option v-for="item in repeatArr" :key="item.value" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户手机号:">
                            <el-input v-model="queryForm.phone" placeholder="客户手机号"></el-input>
                    </el-form-item>                
                    <el-form-item label="释放时间">
                        <el-date-picker v-model="queryForm.releaseTime1" type="datetime" placeholder="选择日期时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="—" class="widthauto">    
                        <el-date-picker v-model="queryForm.releaseTime2" type="datetime" placeholder="选择日期时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="搜索词:">
                        <el-input  v-model="queryForm.searchWord" placeholder="搜索词"></el-input>
                    </el-form-item>                
                    <el-form-item label="资源类型:" prop="type">
                        <el-select v-model="queryForm.type" placeholder="资源类型" clearable>
                            <el-option v-for="item in typeArr" :key="item.value" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源类别:" prop="category">
                        <el-select v-model="queryForm.category" placeholder="资源类别" width="100" clearable>
                            <el-option v-for="item in categoryArr" :key="item.value" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="地区:">
                        <el-input  v-model="queryForm.address" placeholder="地区"></el-input>
                    </el-form-item>
                </el-row>  
                <div class="mainSearchBtnBox"> 
                    <el-button icon="el-icon-search" type="primary" @click="initList" class="searchBtn">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span>
                </div> 
            </el-form>
        </div>
        <el-table :data="tableData" border style="width: 100%" tooltip-effect="light" ref="multipleTable" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="55" prop="clueid"  align="center"> </el-table-column>
            <el-table-column prop="cusName" label="客户姓名"  align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
            <el-table-column prop="cusLevel" :formatter="formatCusLevel" label="客户级别"  align="center"></el-table-column>
            <el-table-column prop="customerStatusName" label="客户状态" align="center" width="120"></el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="170"></el-table-column>
            <el-table-column prop="project" label="项目名称" align="center" ></el-table-column>
            <el-table-column prop="searchWord" label="搜索词" align="center" ></el-table-column>
            <el-table-column prop="teleDirector" label="电销总监" align="center" ></el-table-column>
            <el-table-column prop="teleSale" label="电销顾问" align="center" ></el-table-column>
            <el-table-column prop="teleGorupName" label="电销组" align="center" ></el-table-column>
            <el-table-column prop="" label="重复手机号资源"  align="center"></el-table-column>
            <el-table-column prop="" label="跟进记录"  align="center">
                <template slot-scope="scope">
                    <el-button @click="openTrackingDialog(scope.row.clueid)" type="text" size="small">
                        点击查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="releaseTime" label="释放时间" align="center" width="170"></el-table-column>
            <el-table-column prop="releaseReasonName" label="释放原因" align="center" ></el-table-column>
        </el-table>
        <table-pagination :pager="pager"  @change="initList"></table-pagination>
    </div>
    <!--释放记录-->
    <el-dialog title="释放记录"  :visible.sync="releaseDialogFormVisible" width="870px">
        <template>
            <el-form :model="release" ref="release" class="demo-form-inline marginB20" style="width:80%;">
                <el-row :gutter="20" >
                    <el-col  :span="7"> <el-input  v-model="release.customerName" placeholder="客户姓名"></el-input> </el-col>
                    <!--<el-col  :span="7"> <el-input  v-model="release.releaseReason" placeholder="释放原因"></el-input> </el-col>-->
                    <el-col  :span="7"> <el-input  v-model="release.releaseUserName" placeholder="释放人电销顾问姓名"></el-input> </el-col>
                    <el-col  :span="3">  <el-button  type="primary" @click="releaseInitList">搜索</el-button> </el-col>
                </el-row>
            </el-form>
            <el-table :data="tableReData" border style="width: 100%" tooltip-effect="light"  ref="releaseTable">
                <el-table-column prop="xh" label="序号" width="80"  align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="customerName" label="客户姓名" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="projectName" label="项目"  align="center"></el-table-column>
                <el-table-column prop="releaseTime" label="释放时间" align="center" show-overflow-tooltip></el-table-column>
                <!--<el-table-column prop="releaseReasonValue" label="释放原因"  align="center" show-overflow-tooltip></el-table-column>-->
                <el-table-column prop="realeseUserName" label="释放人姓名"  align="center" show-overflow-tooltip></el-table-column>
            </el-table>
            <table-pagination :pager="releasePager"  @change="releaseInitList"></table-pagination>
        </template>
    </el-dialog>

    <dialog-tracking :param="trackingParam"></dialog-tracking>


</div>

<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<!--<script th:src="@{/js/excel/xlsx.min.js}" src="../static/js/excel/xlsx.min.js"></script>-->
<script th:inline="javascript">
    <!--电销组-->
    var dzList=[[${dzList}]];
    var dxgwList=[[${dxgwList}]];
    var dxzjList = [[${dxzjList}]]
    console.log("================")
    console.log(dzList)
    // 查询 模块
    var mainDivVM = new Vue({
        el: '#mainDiv',
        data: {
            isShow:false,
            releaseDialogFormVisible:false,
            formLabelWidth:"150px",
            tableData:[],
            tableReData:[],
            categoryArr:[],
            typeArr:[],
            reasonArr:[],
            cusStatusArr:[],
            teleketGroupArr:dzList,
            teleketSaleArr:dxgwList,
            teleketDirectorArr:dxzjList,
            repeatArr:[{value:1,name:'是'},{value:0,name:'否'}],
            orgLeafOptions:[],
            multipleSelection:[],
            queryForm:{
                releaseReason:"",
                customerStatus:"",
                teleGorupId:"",
                teleSaleIds:[],
                project:"",
                isRepetition:"",
                createTime1:"",
                createTime2:"",
                releaseTime1:"",
                releaseTime2:"",
                searchWord:"",
                phone:"",
                type:"",
                category:"",
                address:""
            },
            release:{
                customerName:"",
                releaseReason:"",
                releaseUserName:""
            },
            allocation:{
                saleid:""
            },
            trans:{
                director:""
            },
            transrules:{
                director: [
                    {required: true, message: '请选择电销总监', trigger: 'change'},
                ],
            },
            allorules:{
                saleid: [
                    {required: true, message: '请选择电销顾问', trigger: 'change'},
                ],
            },
            pager:{
                total: 0,
                currentPage: 1,
                pageSize: 20,
            },
            releasePager:{
                total: 0,
                currentPage: 1,
                pageSize: 20,
            },
            trackingParam:{
                trackingDialogVisible:false,
                tableData:[]
            },
        },
        methods: {
            formatCusLevel(row, column){
                return row.cusLevel==1?"VIP": row.cusLevel==2?"重要":row.cusLevel==2?"普通":""
            },
            openTrackingDialog(cid){
                var param = {};
                param.clueId = cid;
                axios.post('/aggregation/tracking/queryList', param)
                    .then(function (response) {
                        console.log(response.data)
                        if (response.data.code == 0) {
                            mainDivVM.trackingParam.tableData = response.data.data
                            mainDivVM.trackingParam.trackingDialogVisible = true;
                        } else {
                            mainDivVM.$message.error(response.data.msg);
                        }
                    }).catch(function (error) {
                    console.log(error);
                });

            },

            releaseInitList(){
                var param = this.release;
                param.type = 1;
                param.pageSize = this.releasePager.pageSize;
                param.pageNum =  this.releasePager.currentPage;
                axios.post('/aggregation/releaserecord/queryPageList',param).then(function (response) {
                    if(null===response||response.data==null||response.data.code!='0'){
                        if(response.data.code!='0'){
                            mainDivVM.$message({message: response.data.msg, type: 'warning'});
                        }
                        return false;
                    }else{
                        mainDivVM.tableReData =response.data.data.data;
                        mainDivVM.releasePager.currentPage= response.data.data.currentPage;
                        mainDivVM.releasePager.total= response.data.data.total;
                        mainDivVM.releasePager.pageSize =  response.data.data.pageSize;
                    }
                })
            },
            openRelease(){
                //查询释放记录
                this.releaseInitList()
                this.releaseDialogFormVisible = true
            },
            openBack(){
                if(this.multipleSelection.length==0){
                    this.$message({message: '请选择还原资源', type: 'warning'});
                    return false;
                }else{
                    var rows = this.multipleSelection;
                    var names = "";
                    for(var i=0;i<rows.length;i++){
                        names = names + '['+rows[i].cusName+']';
                    }
                    var str = '确定要还原'+names+'客户吗?';
                    this.$confirm(str, '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
                        var rowIds = [];
                        for(var i=0;i<rows.length;i++){
                            rowIds.push(rows[i].clueid)
                        }
                        var param={};
                        param.cliueIdsList = rowIds;
                        axios.post('/aggregation/invalidcustomer/resourceReduction', param)
                            .then(function (response) {
                                mainDivVM.$message({type: 'success', message: '确定还原!',duration:2000,onClose:function(){
                                        mainDivVM.initList();
                                    }});
                            })
                            .catch(function (error) {
                                mainDivVM.$message.error(error);
                                console.log(error);
                            });
                    }).catch(() => {
                        this.$message({type: 'info', message: '已取消还原'});
                    });
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            resetForm(formName) {
                if( mainDivVM.$refs[formName]) {
                    mainDivVM.$refs[formName].resetFields();
                }
            },
            initList(){
                var param = this.queryForm;

                console.log(param)
                param.pageSize = this.pager.pageSize;
                param.pageNum =  this.pager.currentPage;
                axios.post('/aggregation/invalidcustomer/queryPage',param).then(function (response) {
                    if(null===response||response.data==null||response.data.code!='0'){
                        if(response.data.code!='0'){
                            mainDivVM.$message({message: response.data.msg, type: 'warning'});
                        }
                        return false;
                    }else{
                        mainDivVM.tableData =response.data.data.data;
                        mainDivVM.pager.currentPage= response.data.data.currentPage;
                        mainDivVM.pager.total= response.data.data.total;
                        mainDivVM.pager.pageSize =  response.data.data.pageSize;
                    }
                })
            },
            toogleClick(){
                if(this.isShow){
                    this.isShow=false
                }else{
                    this.isShow=true
                }          
            },
        },
        created(){
            // 取页数存储
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
            // 表格初始化
            this.initList();
            //初始资源类别数据
            var  param={};
            param.groupCode="clueCategory";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                console.log(response.data.data)
                mainDivVM.categoryArr=response.data.data;
            });
            //初始化资源类型数据
            param={};
            param.groupCode="clueType";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                console.log(response.data.data)
                mainDivVM.typeArr=response.data.data;
            });
            // 初始化释放原因
            param={};
            param.groupCode="releaseReason";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                console.log(response.data.data)
                mainDivVM.reasonArr=response.data.data;
            });
            //初始化客户状态
            param={};
            param.groupCode="customerStatus";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                console.log(response.data.data)
                mainDivVM.cusStatusArr=response.data.data;
            });

            // 初始化table数据

        },//created方法 结束
        mounted(){
            document.getElementById('mainDiv').style.display = 'block';
        }
    });

</script>
</body>
</html>